<template>
    <div class="NodeManagement">
        <Left :state="state"></Left>
        <div class="middle">
            <Top @Down="Down"></Top>
            <p class="title1">节点管理</p>
            <p class="title2">一段关于节点管理的描述</p>
            <div class="content">

<!--                左侧弹窗-->

                <div class="popup" v-if="show">
                    <p>添加节点</p>
                    <div class="line1">
                        <span>IP:</span><input type="text" v-model="IP">
                    </div>
                    <div class="line2">
                        <span>Port:</span><input type="text" v-model="Port">
                    </div>
                    <div>
                        <button class="sure" @click="sureAdd">确认</button>
                        <button class="unsure" @click="addNode">取消</button>
                    </div>
                </div>

<!--                节点列表-->

                <div class="content-box1">
                    <p class="title3">节点列表</p>
                    <div class="content-top">
<!--                        <p>已选1项</p>-->
                        <div class="content-top-button">
                            <button class="add" @click="addNode">添加节点</button>
                            <button class="delete" @click="getIP" >删除</button>
                        </div>
                    </div>
                    <div class="table-head">
                        <input type="checkbox"  v-model="check" class="" @click="checkAll" />
                        <span class="name">名称</span>
                        <span class="operation">操作</span>
                    </div>
                    <div class="element"
                         v-for="(item,index) in newNodeData"
                         :key="item.index"
                    >
                        <input type="checkbox" :value="index" v-model="check" class="state" name="items" />
                        <span class="name">node{{index}}</span>
                        <img src="../../assets/image/nodeManagementImg/delete.png" alt="" class="ico">
                        <span class="delete" @click="getIP">删除</span>
                    </div>
                </div>

<!--                右侧弹窗-->

                <div class="chooseNode" v-if="show2">
                    <p>选择节点</p>

                    <div class="line">
                        <div v-for="(item,index) in newNodeData2"
                             :key="item.index"
                             :class="[isActive===index?'node1':'node']"
                             @click="standNode(index)"
                        >
                            node{{index}}
                        </div>
                    </div>

                    <div class="line3">
                        <button class="stand" @click="sandFile">发送</button>
                        <button class="qv" @click="choose">取消</button>
                    </div>

                </div>

<!--                发送文件-->
                <div class="content-box2"   v-loading="loading">
                    <p class="title4">发送文件</p>
                    <div class="table-top">
                        <span class="name">名称</span>
                        <span class="operation">操作</span>
                    </div>
                    <div class="text">
                        <div class="file"
                             v-for="(item, index) in newFileList"
                             :key="item.index"
                        >
                            <div class="file-name">{{item}}</div>
                            <div class="file-choose" @click="choose(index)">选择节点</div>
                        </div>
                    </div>
                </div>
            </div>

<!--            分页-->
            <div class="page">
                <div class="page-box1" @click="upleft"><img src="../../assets/image/showImg/left.png" alt="" ></div>
                <div class="page-box1"
                     v-for="(item,index) in length "
                     :key="item"
                     @click="fun(index+1)"
                >{{item}}</div>
                <div class="page-box1"  @click="upright"><img src="../../assets/image/showImg/right.png" alt=""></div>
                <div class="page-box2">5条/页</div>
                <span>跳至</span>
                <input v-model="page" class="page-box3"   @keydown="enterToLogin"/>
                <span>页</span>
            </div>
            <Bottom></Bottom>
        </div>
<!--<router-view></router-view>-->
    </div>
</template>

<script>

    import Top from '../top/top'
    import Left from '../left/left'
    import Bottom from '../bottom/bottom'
    import axios from  'axios'

    export default {
        name: "nodeManagement",
        components:{
            Left,
            Top,
            Bottom
        },
        data(){
            return{
                show2:false,
                check:[],
                show:false,
                newNodeData:[],
                newFileList:[],
                newNodeData2:[],
                delNode:[],
                iP:'',
                port:'',
                filename:'',
                state:1,
                loading: false,
                page:1 ,
                length:[],
                maxpage:'',
                num:0,
                isActive:''
            }
        },
        methods:{
            checkAll(){
                var items = document.getElementsByName("items")



                if(this.num ===0){
                    for(var i=0; i<items.length ; i++){
                        items[i].checked = true
                        console.log(items[i].value)

                        var a =items[i].value
                        this.delNode.push({});
                        this.delNode[i].ip = this.newNodeData[a].ip;
                        this.delNode[i].port = this.newNodeData[a].port

                    }
                    this.num = 1
                }
                else {
                    for(var t=0; t<items.length ; t++){
                        items[t].checked = false
                    }
                    this.num = 0
                }


            },

            // 下载
            Down(){
                axios({
                    url:'http://192.168.3.21:8888/user/report/',
                    method:'get',
                }).then(res =>{
                    console.log(res);
                    let a = document.createElement('a');
                     a.href = res.config.url;
                    // a.target = '_blank';//在新窗口打开
                    a.click();
                })
            },

            // 左侧弹窗
            addNode(){
                this.show = !this.show
            },

            // 确认添加节点
            sureAdd(){
                this.show = !this.show;
                var data ={
                    ip:this.IP,
                    port:this.Port
                };
                 axios({
                     url: 'http://192.168.3.21:8888/node_bmp/node_add/',
                     method: 'post',
                     data: data
                 }).then(res =>{
                     console.log(res)
                     this.$router.go(0)
                 })
            },

            //删除
            getIP(){
                console.log(this.check);
                if(this.delNode===''){
                    for(var i=0 ;i<this.check.length;i++){
                        var a=this.check[i];
                        console.log(a);
                        this.delNode.push({});
                        this.delNode[i].ip = this.newNodeData[a].ip;
                        this.delNode[i].port = this.newNodeData[a].port
                    }
                }

                console.log('--------------------------');
                console.log(this.delNode);
                axios({
                    method:'post',
                    url:'http://192.168.3.21:8888/node_bmp/node_delete/',
                    data: this.delNode,
                }).then(res=>{
                    console.log(res);
                    this.$router.go(0)
                })

            },

            //右侧弹窗
            choose(ind){
                this.show2 = !this.show2;
                this.filename = this.newFileList[ind]
            },

            //发送文件点击获取ip和port
            standNode(ind){
                this.isActive=ind;

                this.ip = this.newNodeData2[ind].ip;
                this.port = this.newNodeData2[ind].port;
            },

            //发送文件
            sandFile(){
                this.loading = true
                this.show2 = !this.show2;

                var data = {
                    ip: this.ip,
                    port : this.port,
                    filename : this.filename
                };

                console.log('?????????????????');
                console.log(data);

                axios({
                    method:'post',
                    url:'http://192.168.3.21:8888/bmp/send_files/',
                    data:data
                }).then(res =>{
                    this.loading = false
                    console.log(res)
                    this.$message({
                        message: '发送成功',
                        type: 'success'
                    });
                })
            },

            showFile(){
                axios({
                    method :"get",
                    params:{
                        page:this.page
                    },
                    url : 'http://192.168.3.21:8888/node_bmp/node_fileshow/',
                }).then(res =>{
                    this.maxpage=res.data.nums_page
                    if(this.length!==''){
                        this.length.length=0
                    }
                    for(var i=0;i<res.data.nums_page;i++){
                        this.length.push(i+1)
                    }
                    console.log(res.data.data);
                    if(this.newFileList!==''){
                        this.newFileList.length=0
                    }
                    for(let i=0; i<res.data.data.length; i++){
                        this.newFileList.push({});
                        this.newFileList[i] = res.data.data[i].filename
                    }
                });
            },

            fun(val){
                this.page = val
                this.showFile()
            },
            upleft(){
                if(this.page ===1){
                    console.log("左边没有了");
                    return;
                }else{
                    this.page-=1
                    this.showFile()
                }
            },
            upright(){
                if(this.page === this.maxpage){
                    console.log("右边没有了");
                    return;
                }else{
                    this.page+=1
                    this.showFile()
                }
            },
            enterToLogin () {
                this.showFile()
            },

        },

        mounted() {
            this.showFile()

            axios({
                method :"get",
                url : 'http://192.168.3.21:8888/node_bmp/node_show/',
                responseType:'stream'
            }).then(response =>{
                // console.log(response);
                // console.log(response.data);
                for(let i=0; i<response.data.data.length ; i++){
                    this.newNodeData.push({});
                    this.newNodeData[i].ip = response.data.data[i].ip;
                    this.newNodeData[i].port = response.data.data[i].port;
                }
                this.newNodeData = JSON.parse(JSON.stringify( response.data.data));
                // console.log(this.newNodeData)
            });



            axios({
                method :"get",
                url : 'http://192.168.3.21:8888/node_bmp/node_show/',
                responseType:'stream'
            }).then(response =>{
                console.log("=================")
                console.log(response);
                console.log(response.data);
                for(let i=0; i<response.data.data.length ; i++){
                    this.newNodeData2.push({});
                    this.newNodeData2[i].ip = response.data.data[i].ip;
                    this.newNodeData2[i].port = response.data.data[i].port;
                }
                this.newNodeData2 = JSON.parse(JSON.stringify( response.data.data));
                console.log("=================")
                console.log("=================")
                console.log(this.newNodeData2)
                // console.log(response.data);
                // newNodeData = response.data;
            })
        }

    }
</script>

<style lang="less">
    .NodeManagement{
        position: absolute;
        width: 1920px;
        height:965px;
        background: #F5F7F9;
        opacity: 1;
        display: flex;
        .middle{
            width: 1580px;
            margin-left: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .title1{
                margin-top: 51px;
                align-self: flex-start;
                font-size: 28px;
                font-family: PingFang SC;
                font-weight: 800;
                color: #000000;
                opacity: 1;
            }
            .title2{
                align-self: flex-start;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #000000;
                opacity: 1;
            }
            .content{
                margin-top: 24px;
                width: 1580px;
                display: flex;
                justify-content: space-between;
                .popup{
                    width: 584px;
                    height: 289px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 10px;
                    z-index: 10;
                    position: absolute;
                    left: 368px;
                    top: 321px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;
                    p{
                        width: 64px;
                        height: 22px;
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 800;
                        color: #000000;
                        opacity: 1;
                    }
                    .line1{
                        width: 330px;
                        display: flex;
                        align-items: center;
                        span{
                            width: 35px;
                            height: 22px;
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            opacity: 1;
                        }
                        input{
                            width: 275px;
                            height: 42px;
                            background: #F5F7F9;
                            opacity: 1;
                            border-radius: 10px;
                            outline: none;
                            border: none;
                            text-indent: 10px;
                        }
                    }
                    .line2{
                        display: flex;
                        align-items: center;
                        width: 370px;
                        span{
                            width: 35px;
                            height: 22px;
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            opacity: 1;
                        }
                        input{
                            margin-left: 20px;
                            width: 275px;
                            height: 42px;
                            background: #F5F7F9;
                            opacity: 1;
                            border-radius: 10px;
                            outline: none;
                            border: none;
                            text-indent: 10px;
                        }
                    }
                    .sure{
                        width: 132px;
                        height: 42px;
                        background: #0E8BF8;
                        opacity: 1;
                        border-radius: 10px;
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        outline: none;
                        border: none;
                    }
                    .unsure{
                        width: 132px;
                        height: 42px;
                        background: #FB2525;
                        opacity: 1;
                        border-radius: 10px;
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        outline: none;
                        border: none;
                        margin-left: 12px;
                    }

                }
                .content-box1{
                    width: 780px;
                    height: 650px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 10px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .title3{
                        margin-left: 28px;
                        align-self: flex-start;
                        font-size: 20px;
                        font-family: PingFang SC;
                        font-weight: 800;
                        line-height: 59px;
                        color: #000000;
                        opacity: 1;
                    }
                    .content-top{
                        display: flex;
                        width: 724px;
                        justify-content: space-between;
                        p{
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            opacity: 1;
                        }
                        .content-top-button{
                            .add{
                                width: 110px;
                                height: 42px;
                                background: #0E8BF8;
                                border-radius: 10px;
                                color: #ffffff;
                                border: none;
                                outline: none;
                            }
                            .delete{
                                margin-left: 12px;
                                width: 78px;
                                height: 42px;
                                background: #FA2525;
                                color: #ffffff;
                                border-radius: 10px;
                                border: none;
                                outline: none;
                            }
                        }
                    }
                    .table-head{
                        margin-top: 12px;
                        width: 724px;
                        height: 50px;
                        background: #F5F7F9;
                        opacity: 1;
                        border-radius: 10px;
                        display: flex;
                        align-items: center;
                        input{
                            margin-left: 20px;
                            width: 20px;
                            height: 20px;
                        }
                        img{
                            width: 20px;
                            height: 20px;
                            margin-left: 20px;
                        }
                        .name{
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            opacity: 1;
                            margin-left: 10px;
                        }
                        .operation{
                            margin-left: 529px;
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            opacity: 1;
                        }
                    }
                    .element{
                        width: 724px;
                        height: 50px;
                        background: #8cc5ff;
                        border-radius: 10px;
                        display: flex;
                        align-items: center;
                        margin-top: 16px;
                        .state{
                            margin-left: 20px;
                            width: 20px;
                            height: 20px;
                        }
                        .name{
                            margin-left: 10px;
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            opacity: 1;
                        }
                        .ico{
                            width: 15px;
                            height:16px;
                            margin-left: 482px;
                        }
                        .delete{
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #FB2525;
                            opacity: 1;
                            margin-left: 10px;
                            cursor: pointer;
                        }
                    }

                }
                .chooseNode{
                    width: 584px;
                    height: 289px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 10px;
                    z-index: 10;
                    position: absolute;
                    left: 1200px;
                    top: 455px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;
                    p{
                        width: 64px;
                        height: 22px;
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 800;
                        color: #000000;
                        opacity: 1;
                    }
                    .line{
                        width: 400px;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-around;
                        .node{
                            width: 78px;
                            height: 42px;
                            background: #8cc5ff;
                            border-radius: 10px;
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #ffffff;
                            opacity: 1;
                            text-align: center;
                            line-height: 42px;
                            cursor: pointer;
                        }
                        .node1{
                            width: 78px;
                            height: 42px;
                            background: #2C6EF2;
                            border-radius: 10px;
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #ffffff;
                            opacity: 1;
                            text-align: center;
                            line-height: 42px;
                            cursor: pointer;
                        }
                    }

                    .line3{
                        width: 100%;
                        display: flex;
                        justify-content: space-around;
                        .stand{
                            width: 132px;
                            height: 42px;
                            background: #0E8BF8;
                            opacity: 1;
                            border-radius: 10px;
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #FFFFFF;
                            outline: none;
                            border: none;
                        }
                        .qv{

                            width: 132px;
                            height: 42px;
                            background:  #FB2525;
                            opacity: 1;
                            border-radius: 10px;
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #FFFFFF;
                            outline: none;
                            border: none;
                        }
                    }



                }
                .content-box2{
                    width: 780px;
                    height: 650px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 10px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .title4{
                        align-self: flex-start;
                        margin-left: 28px;
                        margin-top: 28px;
                        font-size: 20px;
                        font-family: PingFang SC;
                        font-weight: 800;
                        color: #000000;
                        opacity: 1;
                    }
                    .table-top{
                        min-height: 50px;
                        display: flex;
                        align-items: center;
                        width: 724px;
                        height: 50px;
                        background: #F5F7F9;
                        opacity: 1;
                        border-radius: 10px;
                        margin-top: 58px;
                        .name{
                            margin-left: 20px;
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            opacity: 1;
                        }
                        .operation{
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            margin-left: 559px;
                            color: #000000;
                            opacity: 1;
                        }
                    }
                    .file{
                        margin-bottom: 16px;
                        width: 724px;
                        height: 50px;
                        background: #8cc5ff;
                        border-radius: 10px;
                        margin-top: 16px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .file-name{
                            white-space:nowrap;
                            margin-left: 20px;
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #000000;
                            opacity: 1;
                        }
                        .file-choose{
                            margin-right: 50px;
                            white-space:nowrap;
                            font-size: 16px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            color: #0E8BF8;
                            opacity: 1;
                            cursor: pointer;
                        }
                    }
                }

            }
            .page{
                width: 390px;
                display: flex;
                align-self: flex-end;
                justify-content: space-around;
                align-items: center;
                /*margin-bottom: 94px;*/
                margin-top: 16px;
                .page-box1{
                    width: 32px;
                    height: 32px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                }
                .page-box2{
                    width: 82px;
                    height: 32px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    opacity: 1;
                }
                .page-box3{
                    width: 48px;
                    height: 32px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    opacity: 1;
                }
                input{
                    outline: none;
                    border: none;
                    text-indent: 20px;
                }
                span{
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    opacity: 1;
                }
            }
        }
    }

</style>
